import React, { Component } from 'react';
import ThePagination from "@/components/ThePagination";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import { apiEventAdvExport, apiEventAdvPage } from '@/request/storageManager/outPut.js'
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import store from "@/store/store"
import { exportSheetTable } from '@/utils/exportTable.js';
import _ from 'lodash';
import { getDateTime3 } from '@/utils/getDate'
//流量投放效果
class TrafficPutOnThe extends Component {
    constructor() {
        super()
        this.formRef_search = React.createRef()
        this.queryFormRef = React.createRef()
        this.voucherFormRef = React.createRef()
        this.state = {
            columns: [
                {
                    title: "日期",
                    dataIndex: "createTime",
                    key: "createTime",
                },
                {
                    title: "注册来源",
                    dataIndex: "registerChannel",
                    key: "registerChannel",
                    render: (_, render) => {
                        return ["APP", "H5", "TEST", "抖音", "sigmod", "微博", "oppo", "小米", "vivo"][render.registerChannel]
                    }
                },
                {
                    title: "注册用户",
                    dataIndex: "registerCount",
                    key: "registerCount",

                },
                {
                    title: "用户付款金额",
                    dataIndex: "registerPayPrice",
                    key: "registerPayPrice",
                    render: text => text && <React.$price price={text} />,
                },
                {
                    title: "次日留存率",
                    dataIndex: "nextDayRetention",
                    key: "nextDayRetention",
                },
                {
                    title: "7日留存率",
                    dataIndex: "sevenDayRetention",
                    key: "sevenDayRetention",
                },
                {
                    title: "15日留存率",
                    dataIndex: "fifteenDayRetention",
                    key: "fifteenDayRetention",
                },
                {
                    title: "30日留存率",
                    dataIndex: "thirtiethDayRetention",
                    key: "thirtiethDayRetention",
                },
            ],
            dataSource: [],
            pageData: {
                pageNo: 1,
                pageSize: 10

            },
            total: 0,
            newColumns: [],
            form_show: true,
            searchOption: [
                { field: 'times', label: '统计时间', placeholder: '', required: false, rules: [], type: 'RangePicker', defaultValue: '' },
            ],
            queryForm: {},
        }
    }
    componentDidMount() {
        this.onColumnsFilter(this.state.columns)
        let searchParams = store.getState().searchValue
        let { pageNo, pageSize, queryForm, pathName } = searchParams
        if (searchParams && pageNo && pathName == 'trafficPutOnThe') {
            this.setState({
                queryForm,
                pageData: {
                    pageNo: pageNo, pageSize: pageSize
                }
            }, () => {
                this.queryFormRef.onSetDefault({
                    ...queryForm
                })
                this.getData()
            })
        } else {
            this.getData()
        }
    }
    getData(values) {
        let { pageNo, pageSize } = this.state.pageData
        if (values && !_.isEmpty(values.times)) {
            values.beginTime = getDateTime3(values.times[0])
            values.endTime = getDateTime3(values.times[1])
            delete (values.times)
        }
        this.setState({
            queryForm: values === undefined ? this.state.queryForm : { ...values }
        }, async () => {
            const params = {
                pageNo, pageSize, queryForm: this.state.queryForm
            }
            store.dispatch({
                type: 'SaveSearchValues',
                data: {
                    pathName: 'trafficPutOnThe',
                    ...params
                }
            })
            let res = await apiEventAdvPage({
                pageNo, pageSize, ...this.state.queryForm,
            })

            if (res.code === 0) {
                this.setState({
                    dataSource: res.data,
                    total: res.totalCount
                })
            }
        })
    }

    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo, pageSize
            }
        }, () => {
            this.getData()
        })
    };
    onReset() {
        this.setState({
            queryForm: {}
        }, () => {
            this.pageChange(1, 10)
        })
    }
    onColumnsFilter(value) {
        this.setState({
            newColumns: value
        })
    }
    onFormSearch(values) {
        this.setState({
            pageData: { pageNo: 1, pageSize: 10 }
        }, () => {
            this.getData(values)
        })
    }
    toExport = async () => {
        const { queryForm } = this.state
        console.log(queryForm);
        if (Object.keys(queryForm).includes("beginTime") && Object.keys(queryForm).includes("endTime")) {
            await apiEventAdvExport({ ...queryForm }).then(res => {
                if (res.code === 0 && res.data) {
                    let th_arr = [
                        {
                            title: '流量-投放效果数据详情',
                            prop: '',
                            children: [
                                {
                                    title: "日期",
                                    prop: "createTime",
                                },
                                {
                                    title: "注册来源",
                                    prop: "registerChannel",
                                },
                                {
                                    title: "注册用户",
                                    prop: "registerCount",

                                },
                                {
                                    title: "用户付款金额",
                                    prop: "registerPayPrice",
                                },
                                {
                                    title: "次日留存率",
                                    prop: "nextDayRetention",
                                },
                                {
                                    title: "7日留存率",
                                    prop: "sevenDayRetention",
                                },
                                {
                                    title: "15日留存率",
                                    prop: "fifteenDayRetention",
                                },
                                {
                                    title: "30日留存率",
                                    prop: "thirtiethDayRetention",
                                },
                            ]
                        },
                    ]
                    let tb_arr = []
                    res.data.forEach((item, index) => {
                        tb_arr.push({
                            index: index + 1,
                            createTime: item.createTime || '/',
                            registerChannel: ["APP", "H5", "TEST", "抖音", "sigmod", "微博", "oppo", "小米", 'vivo'][item.registerChannel] || '/',
                            registerCount: item.registerCount || '/',
                            registerPayPrice: (item.registerPayPrice / 100).toFixed(2) || '/',
                            nextDayRetention: item.nextDayRetention || '/',
                            sevenDayRetention: item.sevenDayRetention || '/',
                            fifteenDayRetention: item.fifteenDayRetention || '/',
                            thirtiethDayRetention: item.thirtiethDayRetention || '/',
                        })
                    })
                    exportSheetTable({ fileName: '流量投放效果数据详情', tH_data: th_arr, tB_data: tb_arr, isSheet: true, merge: false })
                }
            })
        } else {
            React.$message({
                type: 'error',
                content: "请选择日期"
            })
        }
    }
    render() {
        let { columns, dataSource, pageData, total, form_show, searchOption, newColumns } = this.state

        return (
            <div className="p-layout-box commodity-examine">
                <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
                    onReset={() => this.onReset()}
                    onGetValues={(values) => this.onFormSearch(values)} >
                </TheQueryForm>
                <TheTableExtend
                    columns={columns}
                    onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
                    onTableRefresh={() => this.getData()}
                    onColumnsFilter={(value) => this.onColumnsFilter(value)}
                >
                    <TheButton size="middle" onClick={() => this.toExport()} type="default">导出</TheButton>
                </TheTableExtend>
                <TheTable
                    scroll={{ x: "max-content", y: '63vh' }}
                    columns={newColumns}
                    dataSource={dataSource}
                />
                <ThePagination
                    pageNo={pageData.pageNo}
                    pageSize={pageData.pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />

            </div>
        );
    }
}
export default TrafficPutOnThe
